<template>
  <div class="main">
    <mine-title>新建OCR识别分析</mine-title>

    <div class="main-body">

      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="识别类型：" prop="distinguishType">
          <el-radio-group @change="distinguishTypeChange" v-model="form.distinguishType" size="small">
            <el-radio-button label="single">单图片</el-radio-button>
            <el-radio-button label="mult">多图片</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务名称：" prop="taskName" v-if="form.distinguishType == 'mult'" key="taskName">
          <el-input class="value short" size="small" placeholder="请输入内容" v-model="form.taskName" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务类型：" prop="taskType" v-if="form.distinguishType == 'mult'" key="taskType">
          <el-select class="short" v-model="form.taskType" size="small" placeholder="请选择任务类型" clearable>
            <el-option v-for="(item, index) in taskTypeList" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传数据：" :required="true" v-if="form.distinguishType == 'mult'" key="upload2">
          <mine-upload ref="mineUpload" key="2" :fileType="multFileType"></mine-upload>
          <div style="margin-top: 16px;">
            <mine-button secondary size="mini" @click="downloadFile" :loading="downloading">下载模板<i class="iconfont icon-download-line is-right"></i></mine-button>
          </div>
        </el-form-item>
        <el-form-item label="上传数据：" :required="true" v-if="form.distinguishType == 'single'" key="upload1">
          <mine-upload v-if="form.distinguishType == 'single'" key="1" :isUploadOnce="false" @change="singleUploadChange" ref="singleMineUpload" :fileType="singleFileType"></mine-upload>
        </el-form-item>

        <el-form-item class="form-btn-row" label="" v-if="form.distinguishType == 'mult'">
          <mine-button v-if="analysisStatus != '1'" :type="analysisStatus == 0 ? 'primary' : 'success'" @click="submitMult">{{ analysisStatus == 0 ? "开始分析" : "下载结果" }}</mine-button>
        </el-form-item>

        <el-form-item class="form-btn-row" label="" v-if="form.distinguishType == 'single' && this.singleAnalysisStatus != 1">
          <mine-button type="primary" @click="submitSingle">开始分析</mine-button>
        </el-form-item>
      </el-form>
      <div v-loading="singleLoading">
        <div class="each-main-info" v-if="form.distinguishType == 'single' && singleAnalysisStatus == 2">
          <div class="result-area">
            <div class="result-area-head">分析结果</div>
            <div class="result-area-body">
              <img class="single-resultImg" :src="singleResult.imgPath" alt="">
            </div>
          </div>
        </div>

        <div class="each-main-info" v-if="form.distinguishType == 'single' && singleAnalysisStatus == 2">
          <div class="result-area">
            <div class="result-area-head">标记信息</div>
            <div class="result-area-body">
              <div class="each-result" v-for="(item, index) in singleResult.predictData" :key="index">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data: function () {
    return {
      form: {
        distinguishType: "single", // 识别类型
        taskName: "", // 多图片的任务列表
        taskType: "", // 多图片的任务类型
      },
      rules: {
        distinguishType: { required: true, message: '请输入任务名称', trigger: 'change' },
        taskName: { required: true, message: '请输入任务名称', trigger: 'blur' },
        taskType: { required: true, message: '请选择任务类型', trigger: 'blur' },
      },
      taskTypeList: [ // 多图片的任务类型的备选项
        { id: '1001', name: '通用ocr' }
      ],
      multUploadData: {}, // 多图片上传的数据
      multUploadUrl: "openAbilityPlatformPredictTaskUpload", // 多图片上传的地址
      multFileType: ".zip", // 多图片上传的文件类型
      analysisStatus: 0, // 多图片上传分析的状态
      singleAnalysisStatus: 0, // 单图片上传分析的状态
      multResultId: "", // 多图片上传分析的结果id
      singleResult: {}, // 单图片上传分析的结果id
      singleUploadUrl: "openAbilityPlatformPredictTaskOcrSingle", // 单图片上传的地址
      singleFileType: ".jpg,.png", // 单图片上传的文件类型
      downloading: false,
      singleLoading: false,
    }
  },

  methods: {
    // 下载模板
    async downloadFile () {
      this.downloading = true;
      try {
        await this.$store.dispatch('openAbilityPlatformPredictTaskGetFile', {
          projectType: 'ocr_detection'
        });
      } catch (e) {
        console.error(e);
      }

      this.downloading = false;
    },

    // 识别类型发生改变
    distinguishTypeChange: function () {
      this.form.taskName = "";
      this.form.taskType = "";
      this.multUploadData = {};
      this.analysisStatus = 0;
      this.singleAnalysisStatus = 0;
      this.multResultId = "";
      this.singleResult = {};
    },

    // 单图片上传文件发生改变
    singleUploadChange: function () {
      this.singleAnalysisStatus = 0;
    },

    // 单图片上传成功
    singleUploadSuccess: function (data) {
      this.singleResult = data;
      this.singleAnalysisStatus = 2;
    },

    // 提交单图片分析
    submitSingle: async function () {
      if (!this.$refs.singleMineUpload.fileList.length) {
        this.$message({ type: "warning", message: "请选择上传的文件" });
        return false;
      }
      this.$refs.singleMineUpload.uploadStatus = "uploading";
      this.singleAnalysisStatus = 1;
      var formData = new FormData();
      formData.append('File',  this.$refs.singleMineUpload.fileList[0].raw);
      this.singleLoading = true;
      try {
        const res = await this.$store.dispatch(this.singleUploadUrl, formData);
        const result = res.data || {};
        if (result.success) {
					const parmas = result.data || {};
          this.singleUploadSuccess(parmas);
          this.$refs.singleMineUpload.uploadStatus = "waiting";
				} else {
          this.$refs.singleMineUpload.uploadStatus = "error";
          this.$message({ type: "error", message: result.msg || '提交失败' });
        }
      } catch (e) {
        console.error(e);
        this.$refs.singleMineUpload.uploadStatus = "error";
      }
      this.singleLoading = false;
    },

    // 多图片上传成功后的处理函数
    uploadSuccess: async function (data) {
      this.$store.dispatch('openAbilityPlatformPredictTaskIdOcrMulti', data);
      window.history.go(-1);
      /*
      try {
        const res = await this.$store.dispatch('openAbilityPlatformPredictTaskIdOcrMulti', data);
        const result = res.data || {};
        if (result.success) {
          this.analysisStatus = 2;
          this.multResultId = data.id;
          this.$refs.mineUpload.uploadStatus = "success";
        }
      } catch (e) {
        console.log(e);
      }
      */
    },

    // 多图片上传提交
    submitMult: async function () {
      if (this.analysisStatus == 0) {
        if (!this.$common.doSubmit('form', this)) return;
        if (!this.$refs.mineUpload.fileList.length) {
          this.$message({ type: "warning", message: "请选择上传的文件" });
          return false;
        }
        this.analysisStatus = 1;
        this.uploadMult();
      } else {
        const params = { id: this.multResultId };
        try {
          await this.$store.dispatch('openAbilityPlatformPredictTaskIdDownLoadResult', params);
        } catch (e) {
          console.error(e);
        }
      }
    },

    // 上传多图片
    uploadMult: async function () {
      this.$refs.mineUpload.uploadStatus = "uploading";
      var formData = new FormData();
      formData.append("File", this.$refs.mineUpload.fileList[0].raw);
      formData.append("taskName", this.form.taskName);
      formData.append("taskType", this.form.taskType);
      formData.append("creator", this.$store.getters.userName || '');
      formData.append('languageType', 'ocr');
      try {
        const res = await this.$store.dispatch(this.multUploadUrl, formData);
        const result = res.data || {};
        if (result.success) {
					const parmas = result.data || {};
          this.uploadSuccess(parmas);
				}

      } catch (e) {
        console.error(e);
      }
    }

  },
  created () {
    // 设置面包屑导航
    this.$store.commit('SET_BREADCRUMB', [
      { title: '开放能力', path: '/openAbility' },
      { title: '新建OCR识别分析', path: '' }
    ]);
  }
}
</script>

<style lang="less" scoped>
  .main {
    width: 100%;
    height: 100%;
  }

  .main-body {
    height: calc(~"100% - 48px");
    overflow: auto;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-family: PingFangSC-Regular;
  }

  .each-main-info {
    width: 100%;
    margin-bottom: 20px;
  }

  .each-main-info .name {
    width: 110px;
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    text-align: right;
    line-height: 22px;
    font-weight: 400;
    vertical-align: top;
  }

  .each-main-info .value {
    width: calc(~"100% - 200px");
    display: inline-block;
  }

  .vertical-top {
    vertical-align: top;
  }

  .red {
    color: #F73D47;
    font-size: 18px;
    margin-right: 5px;
  }

  .short {
    width: 512px !important;
  }

  .single-show-area {
    width: calc(~"100% - 2px");
    height: 470px;
    border: solid 1px #e6e6e6;
    border-top: none;
  }

  /deep/ .el-tabs__header {
    margin: 0;
  }

  .result-area {
    border-radius: 5px;
    margin-left: 10px;
    width: 75%;
    height: 400px;
    background: white;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 1px #f0f0f0;
  }

  .result-area .result-area-head {
    border-radius: 5px;
    width: 100%;
    height: 40px;
    padding-left: 10px;
    line-height: 40px;
    background: rgb(248, 248, 248);
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    font-weight: 500;
  }

  .result-area-body {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
  }

  .single-resultImg {
    width: 100%;
  }

  .each-result {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: solid 1px #f5f5f5;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    font-weight: 400;
    padding-left: 30px;
  }
</style>
